import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shimo_app/pages/components/loading_button.dart';

import '../sample_page/sample_view.dart';
import 'controller.dart';

/// 启动组件页面 - 主界面，包含串口连接状态和数据显示
class StartComponentComponent extends StatelessWidget {
  StartComponentComponent({Key? key}) : super(key: key);

  // 初始化并注入页面控制器
  final controller = Get.put(StartComponentController());

  // 显示错误详情弹窗
  void _showErrorDetailsDialog(BuildContext context) {
    // 直接使用控制器的 errList
    final errors = controller.errList;

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(
            '错误详情',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          content: Container(
            width: double.maxFinite,
            child: errors.isEmpty
                ? Text('暂无错误信息')
                : ListView.builder(
                    shrinkWrap: true,
                    itemCount: errors.length,
                    itemBuilder: (context, index) {
                      final error = errors[index];
                      // 使用动态访问属性
                      dynamic content;
                      dynamic isFatal;

                      // 尝试不同的属性访问方式
                      try {
                        content = error.content;
                        isFatal = error.isFatal;
                      } catch (e) {
                        try {
                          content = error.content;
                          isFatal = error.isFatal;
                        } catch (e) {
                          content = error.toString();
                          isFatal = false;
                        }
                      }

                      return ListTile(
                        leading: Icon(
                          isFatal == true ? Icons.error : Icons.warning,
                          color: isFatal == true
                              ? Colors.deepOrangeAccent
                              : Colors.grey,
                        ),
                        title: Text(
                          content?.toString() ?? '未知错误',
                          style: TextStyle(
                            color: isFatal == true
                                ? Colors.deepOrangeAccent
                                : Colors.grey,
                          ),
                        ),
                        trailing: Text(
                          isFatal == true ? '严重' : '警告',
                          style: TextStyle(
                            color: isFatal == true
                                ? Colors.deepOrangeAccent
                                : Colors.grey,
                            fontSize: 12,
                          ),
                        ),
                      );
                    },
                  ),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('关闭'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // 使用GetBuilder构建响应式UI，当控制器状态变化时自动重建
    return GetBuilder<StartComponentController>(builder: (controller) {
      return Column(
        children: [
          // 顶部状态信息栏容器
          Container(
            margin:
                EdgeInsets.only(top: 4, left: 40, right: 40, bottom: 1), // 外边距
            padding:
                EdgeInsets.only(left: 30, right: 30, top: 4, bottom: 4), // 内边距
            decoration: BoxDecoration(
              color: Colors.black12, // 背景颜色（浅灰色）
              borderRadius: BorderRadius.all(Radius.circular(12)), // 圆角边框
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween, // 子组件均匀分布
              children: [
                // 左侧：串口连接控制区域
                Row(
                  children: [
                    // 串口标签
                    Text(
                      "串口",
                      style:
                          TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                    ),
                    SizedBox(width: 6), // 间距

                    // 串口选择下拉框
                    DropdownButton(
                        alignment: Alignment.center, // 居中对齐
                        value: controller.selectedPortIndex, // 当前选中的串口索引
                        // 将串口列表转换为下拉菜单项
                        items: controller.serialPortList
                            .map((e) => DropdownMenuItem<int>(
                                  value: controller.serialPortList
                                      .indexOf(e), // 索引作为值
                                  child: Text(e.values.first), // 串口名称作为显示文本
                                ))
                            .toList(),
                        onChanged: controller.isSerialPortConnected
                            ? null // 已连接时禁用选择
                            : (int? val) {
                                // 未连接时可选择
                                controller.selectedPortIndex = val!; // 更新选中索引
                                controller.update(); // 刷新UI
                              }),
                    SizedBox(width: 4), // 间距

                    // 连接/断开按钮
                    SizedBox(
                      height: 42,
                      child: LoadingButton(
                        onPressed: () async {
                          if (controller.isSerialPortConnected) {
                            // 已连接：执行断开操作
                            controller.disconnectSerialPort();
                            return;
                          }
                          // 未连接：执行连接操作
                          await controller
                              .connectSerialPort(controller.selectedPortIndex);
                        },
                        child: Text(controller.isSerialPortConnected
                            ? "关闭"
                            : "连接"), // 动态按钮文本
                      ),
                    ),

                    // 分隔线
                    Container(
                      width: 4,
                      height: 40,
                      margin: EdgeInsets.only(left: 20, right: 20),
                      color: Colors.black12, // 分隔线颜色
                    ),

                    // 连接状态指示器
                    Row(
                      children: [
                        Text(
                          "状态  ",
                          style: TextStyle(color: Colors.black38), // 灰色文字
                        ),
                        // 状态指示灯（圆形）
                        Container(
                          height: 16,
                          width: 16,
                          decoration: BoxDecoration(
                              shape: BoxShape.circle, // 圆形
                              color: controller.isSerialPortConnected
                                  ? (controller.busState == 1
                                      ? Colors.green // 正常状态：绿色
                                      : (controller.busState == -1
                                          ? Colors.orange // 警告状态：橙色
                                          : Colors.redAccent)) // 错误状态：红色
                                  : Colors.grey), // 未连接：灰色
                        ),
                      ],
                    )
                  ],
                ),

                // 中间分隔线
                Container(
                  width: 2,
                  height: 40,
                  color: Colors.lightBlue, // 蓝色分隔线
                ),

                // 右侧：状态信息显示区域
                Row(
                  children: [
                    Text(
                      "状态信息",
                      style:
                          TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                    ),
                    SizedBox(width: 10), // 间距

                    // 状态信息显示容器 - 添加点击功能
                    GestureDetector(
                      onTap: controller.errList.isNotEmpty
                          ? () => _showErrorDetailsDialog(context)
                          : null,
                      child: Container(
                        alignment: Alignment.center, // 内容居中
                        width: 320, // 固定宽度
                        height: 40, // 固定高度
                        decoration: controller.errList.isNotEmpty
                            ? BoxDecoration(
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(
                                  color: Colors.grey.withOpacity(0.5),
                                ),
                              )
                            : null,
                        child: controller.errList.isEmpty
                            ? // 无错误信息：显示"正常"
                            Text(
                                "正常",
                                style: TextStyle(
                                  fontSize: 18,
                                  color: Colors.green, // 绿色文字表示正常
                                  fontWeight: FontWeight.bold,
                                ),
                              )
                            : // 有错误信息：显示错误列表，并添加点击提示
                            Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: Wrap(
                                      spacing: 5, // 水平间距
                                      runSpacing: 5, // 垂直间距
                                      alignment: WrapAlignment.center,
                                      children: controller.errList.map((e) {
                                        // 使用动态访问属性
                                        dynamic content;
                                        try {
                                          content = e.content;
                                        } catch (e1) {
                                          try {
                                            content = e.content;
                                          } catch (e2) {
                                            content = e.toString();
                                          }
                                        }
                                        return Text(
                                          content?.toString() ?? '未知错误',
                                          style: TextStyle(
                                              color: e.isFatal == true
                                                  ? Colors
                                                      .deepOrangeAccent // 致命错误：深橙色
                                                  : Colors.grey), // 普通错误：灰色
                                        );
                                      }).toList(),
                                    ),
                                  ),
                                  Icon(
                                    Icons.arrow_drop_down,
                                    color: Colors.grey,
                                    size: 20,
                                  ),
                                ],
                              ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),

          // 主要内容区域：数据显示页面
          Container(
              height: MediaQuery.of(context).size.height - // 计算容器高度
                  MediaQuery.of(context).padding.top -
                  MediaQuery.of(context).padding.bottom -
                  152, // 减去顶部状态栏和底部导航栏高度
              margin: EdgeInsets.only(top: 0, bottom: 10),
              alignment: Alignment.center, // 内容居中
              child: SamplePage(
                // 嵌入样本数据显示页面
                width: (MediaQuery.of(context).size.width - // 计算宽度
                    MediaQuery.of(context).padding.left -
                    MediaQuery.of(context).padding.right),
                height: MediaQuery.of(context).size.height - // 计算高度
                    MediaQuery.of(context).padding.top -
                    MediaQuery.of(context).padding.bottom -
                    0,
                title: "", // 页面标题（空字符串）
              ))
        ],
      );
    });
  }
}
